import React, { useState, useEffect } from 'react';

import { getCols, getTag, getFiletags } from '../../common/getCols'
import { findIndexByKeyValue } from '../../common/common'

import { connect } from 'umi'
import { Drawer, Row, Col, Button, Divider } from 'antd';

import Headbox from '@/components/pageHeaderBox'
import styles from './user.less';

var fliebt = [{ title: 'ksh', dataIndex: 'ksh', key: 'ksh' },
{ title: 'xingming', dataIndex: 'xingming', key: 'xingming' },
{ title: 'sfzh', dataIndex: 'sfzh', key: 'sfzh' },
{ title: '户籍', dataIndex: '户籍', key: '户籍' },
{ title: 'jtdh', dataIndex: 'jtdh', key: 'jtdh' },
{ title: 'wtdh', dataIndex: 'wtdh', key: 'wtdh' },
{ title: 'qtdh', dataIndex: 'qtdh', key: 'qtdh' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{ title: 'txdz', dataIndex: 'txdz', key: 'txdz' },
{
    title: 'yuanxiaodaihao',
    dataIndex: 'yuanxiaodaihao',
    key: 'yuanxiaodaihao'
},
{
    title: 'yuanxiaomingcheng',
    dataIndex: 'yuanxiaomingcheng',
    key: 'yuanxiaomingcheng'
},
{
    title: 'zhuanyefangxiang',
    dataIndex: 'zhuanyefangxiang',
    key: 'zhuanyefangxiang'
},
{
    title: 'xzquyumingcheng',
    dataIndex: 'xzquyumingcheng',
    key: 'xzquyumingcheng'
},
{ title: 'dizhi', dataIndex: 'dizhi', key: 'dizhi' }]


const Other = (props) => {
    const { route } = props
    const [drawer, setvis] = useState(false)
    const [tags, settags] = useState(getTag())
    const [ftags, setftags] = useState(getFiletags(fliebt))

    useEffect(() => {
        // Update the document title using the browser API
        document.title = `You clicked times`;
        var divs = document.getElementsByTagName('div')
        for (const divc of divs) {
            divc.ondragover = (e) => {
                e.preventDefault()
            }
        }
    });

    const onDrop = (e, m) => {
        e.preventDefault();
        var tags_t = tags

        let add = () => {
            let data = e.dataTransfer.getData("Text").split("|");
            if (e.target.className === styles.bttag) {
                let parentNode = document.getElementById(data[0]).parentNode.id
                let index = findIndexByKeyValue(tags_t, 'key', parentNode)
                var tags_n = tags_t[index].tags.filter(item => {
                    return item != data[1]
                });
                tags_t[index].tags = tags_n
            } else {
                // if (e.target.className === styles.bttagit) {
                //     e.target.parentNode.appendChild(document.getElementById(data[0]));
                // }
                // else {
                //     e.target.appendChild(document.getElementById(data[0]));

                // }
                let ftags_n = ftags.filter(item => {
                    return item != data[1]
                });
                setftags(ftags_n)


                console.log(data[1], e.target.id)

                let index = findIndexByKeyValue(tags_t, 'key', e.target.id)
                tags_t[index].tags.push(data[1])

            }
            settags(tags_t)
        }
        if (e.target.children.length < m && e.target.className !== styles.bttagit) add()
        console.log(tags)
    }

    return (
        <div>
            <Headbox title={route.title} extra={[]} />
            <div className={styles.basicBox}>
                sss
            </div>
            <Drawer
                title="添加表头数据关联"
                placement="bottom"
                visible={true}
                getContainer={false}
                closable
                height="49vw"
            >
                <div>
                    <h2 style={{ color: "red", textAlign: "center" }}>将以下黄色的、文件中的表头标签拖到下面的灰色方框中与系统表头关联。（系统表头中没有的项可以忽略）</h2>
                    <div className={styles.Button}>
                        <Button >重置</Button>
                        <Divider type="vertical" />
                        <Button type="primary">确定</Button>
                    </div>
                    <div className={styles.bttag} onDrop={(e) => onDrop(e, 100)}>
                        {ftags.map((it, id) =>
                            <div draggable key={id} id={`dr${id}`} className={styles.bttagit}
                                onDragStart={(e) => {
                                    e.dataTransfer.setData("Text", e.target.id + '|' + it)
                                }}
                                onDrag={e => {
                                    e.target.className = styles.bbd
                                }}
                                onDragEnd={e => {
                                    e.target.className = styles.bttagit
                                }}
                            >{it}</div>
                        )}
                    </div>
                    <div className={styles.sysbtb}>
                        <Row gutter={4}>
                            {tags.map((it, id) =>
                                <Col key={id} span={4} >
                                    <div key={id}>
                                        <span>{it.title}</span>
                                        <div id={it.key} key={id}
                                            className={styles.sysbt}
                                            onDragOver={(e) => {
                                                e.preventDefault()
                                                e.target.className = styles.bbc
                                            }}
                                            onDragLeave={(e) => {
                                                e.preventDefault()
                                                e.target.className = styles.sysbt
                                            }}
                                            onDrop={(e) => {
                                                onDrop(e, 3)
                                                e.target.className = styles.sysbt
                                            }}
                                        >
                                            {it.tags.map((it, id) =>
                                                <div draggable key={id} id={`dr${id}`} className={styles.bttagit}
                                                    onDragStart={(e) => {
                                                        e.dataTransfer.setData("Text", e.target.id + '|' + it)
                                                    }}
                                                    onDrag={e => {
                                                        e.target.className = styles.bbd
                                                    }}
                                                    onDragEnd={e => {
                                                        e.target.className = styles.bttagit
                                                    }}
                                                >{it}</div>
                                            )}
                                        </div>
                                    </div>
                                </Col>
                            )}
                        </Row>
                    </div>
                </div>
            </Drawer>
        </div>
    )
}

export default connect(({ global }) => ({
    global,
}))(Other);

